<template>
  <div class="vichle">
    <Title text="物流车辆信息统计" />
    <div class="cct">
      <div class="card">
        <SecondTitle text="货车载货体积" />
        <Cube />
      </div>
      <div class="card">
        <SecondTitle text="货车吨位" />
        <TrukWeight v-if="trukData.datas.length" :chartData="trukData.datas"></TrukWeight>
      </div>
    </div>
  </div>
</template>
<script>
import Title from './title.vue'
import SecondTitle from './second-title.vue'
import Cube from './cube.vue'
import TrukWeight from './trukWeight.vue'
import { getVehicleVolume } from '@/api/express'
import { onMounted, reactive } from 'vue'

export default {
  components: {
    Title,
    SecondTitle,
    Cube,
    TrukWeight
  },
  setup() {
    const trukData = reactive({
      datas: []
    })
    onMounted(() => {
      getVehicleVolume().then(res => {
        if (res?.success) {
          const { tonnage = [] } = res.result || {}
          console.log(tonnage)
          trukData.datas = tonnage
        }
      })
    })
    return {
      trukData
    }
  }
}
</script>

<style lang="less">
.vichle {
  .cct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 142px;
    margin-top: 112px;
    .card {
      width: 1400px;
      // &:first {
      //   margin-right: 325px;
      // }
    }
  }
}
</style>
